<template>
  <div class="layout-wrapper">
    <!-- <div class="layout-header">
      <div class="logo">QIANKUN-EXAMPLE</div>
			<div class="userinfo">主应用的state：{{ JSON.stringify(user) }}</div>
			<ul class="sub-apps">
				<li v-for="item in microApps" :class="{active: item.activeRule === current}" :key="item.name" @click="goto(item)">{{ item.name }}</li>
			</ul>
    </div> -->
		<div class="layout-sidebar">
			<header>
				<div class="logo">QIANKUN-EXAMPLE</div>
				<div class="userinfo">主应用的state：{{ user.name }}</div>
			</header>
			<el-menu
				:default-active = 'menuIndex'
				class="el-menu-vertical-demo"
				@select = "handleSelect"
				@open="handleOpen"
				@close="handleClose">
				<template v-for="(item, index) in microApps" :data-id="item.name" :data-index = "index">
					<el-submenu  v-if="item.isSubMenu" :class="{active: item.activeRule === current}" :key="item.name" :index="''+ index">
						<template slot="title">
							<span>{{item.name}}</span>
						</template>
						<el-menu-item-group v-if="subMenuList.length > 0">
							<el-menu-item v-for="(item, subindex) in subMenuList"  :key="item.name" :index="index + '-' + subindex" >{{item.name}}</el-menu-item>
						</el-menu-item-group>
					</el-submenu>

					<el-menu-item v-else :class="{active: item.activeRule === current}" :key="item.name" :index="''+ index" >
						<span slot="title">{{item.name}}</span>
					</el-menu-item>
				</template>
			</el-menu>
				<!-- <ul class="sub-apps">
				<li v-for="item in microApps" :class="{active: item.activeRule === current}" :key="item.name" @click="goto(item)">{{ item.name }}</li>
			</ul> -->
			<!-- <ul class="newslist">
				<li v-for="item in subMenuList"  :key="item.name" @click="toDetail(item)">{{ item.name }}</li>
			</ul> -->
    </div>
    <div id="subapp-viewport"></div>
  </div>
</template>

<script>
import NProgress from 'nprogress'
import microApps from './micro-app'
import store from '@/store'
export default {
  name: 'App',
  data () {
    return {
      isLoading: true,
      microApps,
			current: '/sub-vue/',
			menuIndex: '0',
			subMenuList: [
				{ name: '2eqjwehqwheq', id: '1' },
				{ name: '我和我的祖国', id: '2' },
				{ name: 'え凯撒奖看', id: '3' },
				{ name: '按时发简历就上课了复健科拉丝机', id: '4' }
			]
    }
  },
  computed: {
    user () {
      return store.getGlobalState('user')
    }
  },
  watch: {
    isLoading (val) {
      if (val) {
        NProgress.start()
      } else {
        this.$nextTick(() => {
          NProgress.done()
        })
      }
    }
  },
  components: {},
  methods: {
		handleOpen (key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose (key, keyPath) {
			console.log(key, keyPath);
		},
		handleSelect (index) {
			var indexArr = index.split('-');
			var item = this.microApps[indexArr[0]];
			if (indexArr[1]) {
				console.log(item.activeRule + this.subMenuList[indexArr[1]].id)
				history.pushState(null, item.activeRule + this.subMenuList[indexArr[1]].id, item.activeRule + `?id=${this.subMenuList[indexArr[1]].id}`)
			} else {
				history.pushState(null, item.activeRule, item.activeRule);
			}
		},
		toDetail (item) {
			history.pushState(null, item.activeRule + item.id, item.activeRule + `?id=${item.id}`)
		},
    goto (item) {
      history.pushState(null, item.activeRule, item.activeRule)
      // this.current = item.name
    },
    bindCurrent () {
			const path = window.location.pathname
			this.menuIndex = '' + this.microApps.findIndex(item => item.activeRule === path);
      if (this.menuIndex >= 0) {
				this.current = path;
			}
			if (this.menuIndex == '2') {
				var id = this.getURLPara('id')
				this.menuIndex = '2-' + (id >= 0 ? id - 1 : 0);
			}
    },
    listenRouterChange () {
      const _wr = function (type) {
        const orig = history[type]
        return function () {
          const rv = orig.apply(this, arguments)
          const e = new Event(type)
          e.arguments = arguments
          window.dispatchEvent(e)
          return rv
        }
      }
      history.pushState = _wr('pushState')

      window.addEventListener('pushState', this.bindCurrent)
      window.addEventListener('popstate', this.bindCurrent)

      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('pushState', this.bindCurrent)
        window.removeEventListener('popstate', this.bindCurrent)
      })
		},
		getURLPara (name) {
			var reg = new RegExp('^(?:.*[&\\?])' + encodeURI(name) + '=[^&]+');
			var arr = document.location.search.match(reg);
			if (arr != null) {
					return decodeURI(arr[0].substring(arr[0].search('=') + 1));
			}
			return '';
		}
  },
  created () {
    this.bindCurrent()
    NProgress.start()
  },
  mounted () {
    this.listenRouterChange()
  }
}
</script>

<style lang="scss">
html, body{
  margin: 0 !important;
  padding: 0;
}
.layout-wrapper{
	display: flex;
	justify-content: space-between;
	height: 100vh;
	overflow: auto;
	ul{
		list-style: none;
	}
	.layout-header{
		height: 50px;
		width: 100%;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		line-height: 50px;
		position: relative;
		.logo {
			float: left;
			margin: 0 50px;
		}
		.sub-apps {
			list-style: none;
			margin: 0;
			ul{
				list-style: none;
				li{
					height: 40px;
					line-height: 40px;
					text-align: left;
					display: inline-block;
					padding: 0 20px;
					border-bottom: 1px solid #ccc;
					cursor: pointer;
					&:hover, &.active{
						border-bottom: 1px solid #42b983;
						color:#42b983;
						text-decoration: underline;
					}
				}
			}
		}
		.userinfo{
			position: absolute;
			right: 100px;
			top: 0;
		}
	}
	.layout-sidebar{
		width: 18%;
		min-width: 300px;
		box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
		header{
			padding: 10px 0;
			text-align: center;
			color: rgb(64,158,255);
		}
		ul.sub-apps{
			list-style: none;
			li{
				height: 40px;
				line-height: 40px;
				text-align: left;
				padding: 0 20px;
				border-bottom: 1px solid #ccc;
				cursor: pointer;
				&:hover, &.active{
					border-bottom: 1px solid #42b983;
					color:#42b983;
				}
			}
		}
	}
	#subapp-viewport{
		width: 80%;
		height: 100%;
		overflow: auto;
	}
}
</style>
<style lang="scss">
	.el-menu-item.is-active{
		background:  rgba(64,158,255, 0.3)
	}
</style>
